<template>
    <el-form label-width="80px" label-position="left" inline class="clearfix">
        <el-row class="leftSear" :style="`width:${show ? '100%' : ''};float:left`">
            <slot />
            <el-form-item v-show="show" style="float: right;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchClick">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetClick">重置</el-button>
                <el-button v-if="!noMore" type="text" size="mini" @click="moreClick">更多查询<i
                        :class="show ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i></el-button>
            </el-form-item>
        </el-row>
        <el-row :class="!show ? 'btnRow' : 'unBtnRow'" v-show="!show">
            <slot name="more"></slot>
            <el-form-item style="float: right;margin: 0;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchClick">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetClick">重置</el-button>
                <el-button v-if="!noMore" type="text" size="mini" @click="moreClick">更多查询<i
                        :class="show ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i></el-button>
            </el-form-item>
        </el-row>
    </el-form>
</template>
<script>
    export default {
        data() {
            return {
                show: false
            }
        },
        props: {
            noMore: {
                type: Boolean,
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.moreClick();
            });
        },
        methods: {
            moreClick() {
                this.show = !this.show
            },
            searchClick() {
                this.$emit('searchHandle')
            },
            resetClick() {
                this.$emit('resetHandle')
            }
        }
    }
</script>
<style scoped>
    .btnRow {
        display: block;
    }

    .unBtnRow {
        display: none;
    }
</style>